<template>
	<view class="homeLayout pageBg">
		<custom-nav-bar :title="'推荐'"></custom-nav-bar>
		
		<view class="banner">
			<swiper 
				indicator-dots 
				indicator-color="rgba(255, 255, 255, .5)" 
				autoplay circular
				indicator-active-color="#fff">
				<swiper-item v-for="item in bannerList" :key="item._id">
					<image :src="item.picurl" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper autoplay interval="2500" duration="300" circular vertical>
					<swiper-item v-for="item in noticeList" :key="item._id"  @click="gotoNoticeDetail(item._id)">{{ item.title }}</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>
		
		<view class="select">
			<common-title>
				<template #name>每日推荐</template>
				<template #custom>
					<view class="date">
						<uni-icons type="calendar" size="18" color="#28b389"></uni-icons>
						<view class="text">
							<uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
						</view>
					</view>
				</template>
			</common-title>
			<view class="content">
				<scroll-view scroll-x>
					<view class="box" v-for="(item, index) in recommendList" :key="item._id" @click="gotoPreview(index, item)">
						<image :src="item.smallPicurl"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="theme">
			<common-title>
				<template #name>专题精选</template>
				<template #custom>
					<view class="more">
						<navigator url="/pages/classify/classify" open-type="reLaunch" class="more">More+</navigator>
					</view>
				</template>
			</common-title>
			<view class="content">
				<theme-item v-for="item in choicenessList" :key="item._id" :info="item"></theme-item>
				<theme-item :isMore="true"></theme-item>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import { computed, onBeforeMount, reactive, ref } from 'vue'
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { getBannerAPI, getNoticeAPI, getRandomWallAPI, getClssifyAPI } from '@/api/index.js'
import { useClassListStore } from '@/stores/class-list.js'

const classListStore = useClassListStore()
const bannerList = reactive([])
const recommendList = reactive([])
const noticeList = reactive([])
const choicenessList = reactive([])

// 获取轮播图
const getBannerList = async () => {
	const res = await getBannerAPI()
	if(res.errCode === 0) {
		bannerList.splice(0, bannerList.length, ...res.data)
		// console.log('轮播图：', bannerList);
	} else {
		uni.showToast({ title: res.errMsg, icon: 'error' })
		console.error(res)
	}
}

// 获取公告
const getNoticeList = async () => {
	const res = await getNoticeAPI({ select: true })
	const list = res.data.map(item => {
		return {
			...item,
			author: item.author.replace(/咸虾米/g, '青冥'),
			title: item.title.replace(/咸虾米/g, '青冥')
		}
	})
	if(res.errCode === 0) {
		noticeList.splice(0, noticeList.length, ...list)
		// console.log('公告：', noticeList);
	} else {
		uni.showToast({ title: res.errMsg, icon: 'error' })
		console.error(res)
	}
}

// 获取每日推荐
const getRecommendList = async () => {
	const res = await getRandomWallAPI()
	if(res.errCode === 0) {
		recommendList.splice(0, recommendList.length, ...res.data)
		// console.log('每日推荐：', recommendList);
	} else {
		uni.showToast({ title: res.errMsg, icon: 'error' })
		console.error(res)
	}
}
// 获取专题精选
const getChoicenessList = async () => {
	const res = await getClssifyAPI({ select: true, pageSize: 8 })
	if(res.errCode === 0) {
		choicenessList.splice(0, choicenessList.length, ...res.data)
		// console.log('专题精选：', choicenessList);
	} else {
		uni.showToast({ title: res.errMsg, icon: 'error' })
		console.error(res)
	}
}


// 跳转到预览页面
const gotoPreview = (index, item) => {
	recommendList.map(item => {
		item.className = item.classname
		item.picUrl = item.smallPicurl.replace("_small.webp", ".jpg")
	})
	classListStore.classList = recommendList
	uni.navigateTo({ url: `/pages/preview/preview?index=${index}&id=${item._id}&classname=${item.classname}` })
}
// 跳转到公告详情
const gotoNoticeDetail = (id) => uni.navigateTo({ url: `/pages/notice/detail?id=${id}` })

// 分享到消息
onShareAppMessage((e) => {
	return {
		title: '@青冥壁纸',
		path: '/pages/index/index',
		// imageUrl: '/static/images/share.jpg'
	}
})
// 分享到朋友圈
onShareTimeline(() => {
	return {
		title: '@青冥壁纸',
		// path: '/pages/index/index',
		// imageUrl: '/static/images/share.jpg'
	}
})


onBeforeMount(() => {
	getBannerList()
	getNoticeList()
	getRecommendList()
	getChoicenessList()
})
</script>

<style lang="scss" scoped>
@import '@/common/style/index/index.scss';
</style>
